<template>
  <div class="bmap">
    <v-container><h1>展会地图</h1></v-container>
    <v-container>
      <v-card
        class="mx-auto"
        width="100%"
        rounded="0"
        v-for="(item, i) of img1"
        :key="i"
      >
        <v-img :src="item.bmImg" width="100%" height="auto"></v-img>
        <v-card-title>中国西部国际博览城</v-card-title>
        <v-card-actions>
          <v-btn text>展馆介绍</v-btn>
          <v-spacer></v-spacer>
          <v-btn icon @click="show = !show">
            <v-icon>{{ show ? "mdi-chevron-up" : "mdi-chevron-down" }}</v-icon>
          </v-btn>
        </v-card-actions>
        <v-expand-transition>
          <div v-show="show">
            <v-divider></v-divider>
            <v-card-text>
              作为中国西部国际博览会永久会址地，是中国四川省及成都市会展业的龙头项目，是承载中国中西部会展经济发展的新增长极。
              西博城占地1080亩，总建筑面积57万平方米，室内展览面积在国内已建成场馆中名列前茅，
              并配置了完善的会议、办公、餐饮及停车场、货运轮转区等配套设施，整体硬件水平居全国前列、中西部领先。目前，
              西博城已圆满承接中国西部成都国际生态环境保护博览会、中国西部国际博览会、成都国际家具工业展览会、全国糖酒会等大型高端会展及活动，
              办展办会环境、展会专业服务得到各界一致好评。
            </v-card-text>
          </div>
        </v-expand-transition>
      </v-card>
    </v-container>
    <v-container fluid>
      <v-card v-for="(item, i) of img2" :key="i" style="margin-bottom:1vh">
        <v-img :src="item.bmImg"> </v-img>
      </v-card>
    </v-container>
  </div>
</template>
<script lang="ts">
import Vue from "vue";
import { getBmap, getBmapAns } from "@/api/bmap";

interface IImg {
  bmid: string;
  bmImg: string;
}
interface IData {
  show: boolean;
  img1: Array<any | IImg>;
  img2: Array<any | IImg>;
}
export default Vue.extend({
  name: "Bmap",
  data: (): IData => ({
    show: false,
    img1: [],
    img2: [],
  }),
  mounted() {
    getBmap().then((res) => {
      const { code, msg, data } = res as unknown as getBmapAns;
      if (code === 200) {
        this.img1 = data.slice(0, 1);
        this.img2 = data.slice(1);
      } else {
        console.log(msg);
      }
    });
  },
});
</script>
<style>
.container {
  margin-bottom: -2vh !important;
}
</style>